<template>
    <div>
    <div class="container" :style="{'border-color':isClicked?'black':'grey','border-width': isClicked?
    '4px':'1px',...styles.container}">
        <text class="container-content" :style="styles.containerContent">{{musicName}}</text>
        <image class="container-content-add-btn" :style="styles.addBtn" :src="img.addBtn" @click="handleAdd"></image>
        <image class="container-content-sub-btn" :style="styles.subBtn" :src="img.subBtn" @click="handleSub"></image>

    </div>
    <image class="container-del-btn" :style="styles.delBtn" :src="img.delBtn" @click="handleDelete"></image>
    </div>
</template>

<script>/**
 * 音符输入框
 */

import {getImagePath} from "../../../util/path-util";
import {addEightByXYValue, getMusicFlagByXYValue, subEightByXYValue} from "../../../util/compute";
import {getDeviceHeight, getFormatHeightPX, toast} from "../../../util/common";
let modal = weex.requireModule('modal')
export default {
        name: "music-flag-input",
        props:{
            xValue:{
              type:String,
              default:'60'
            },
            yValue:{
                type:String,
                default:'60'
            },
            isClicked:{
                type:Boolean,
                default:false
            }
        },
        data(){
            return {
                musicName:'A1',
                isDelete:false,
                styles:{
                  container:{
                      height:getFormatHeightPX(60),
                      // height:getDeviceHeight(0.04)
                  },
                    containerContent:{
                        'font-size':getFormatHeightPX(26)
                    },
                    addBtn:{
                      height:getFormatHeightPX(50)
                    },
                    subBtn:{
                      height:getFormatHeightPX(47)
                    },
                    delBtn:{
                      height:getFormatHeightPX(54)
                    }
                },
                img:{
                    delBtn: getImagePath('delete'),
                    subBtn: getImagePath('substract'),
                    addBtn: getImagePath('add'),
                }
            }
        },
    watch:{
      xValue(newVal){
          this.musicName = getMusicFlagByXYValue(newVal,this.yValue).name;
      } ,    yValue(newVal){
            this.musicName = getMusicFlagByXYValue(this.xValue,newVal).name;
        }
    },
    mounted() {
            this.musicName = getMusicFlagByXYValue(this.xValue,this.yValue).name;
            },
    methods:{
        handleAdd(){
            new Promise(resolve => {
                let item = addEightByXYValue(this.xValue,this.yValue);
                if(item){
                    // this.xValue = item.xValue;
                    // this.yValue = item.yValue;
                    this.$emit('update:xValue',item.xValue)
                    this.$emit('update:yValue',item.yValue)
                    this.musicName = getMusicFlagByXYValue(item.xValue,item.yValue).name;
                }else{
                    toast('没有更高的八度了')
                }
            })
                },
        handleSub(){
            let item = subEightByXYValue(this.xValue,this.yValue);
            if(item){
                this.$emit('update:xValue',item.xValue)
                this.$emit('update:yValue',item.yValue)
                this.musicName = getMusicFlagByXYValue(item.xValue,item.yValue).name;
            }else{
                toast('没有更低的八度了')
            }
        },
            handleDelete(){
                this.$emit('onDelete');
            }
        }
    }
</script>

<style scoped>
 .container{
     margin-top:10px;
     margin-bottom:10px;
     align-self: left;
     width:250px;
     /*height:60px;*/
     border-radius: 40px;

     border-style: solid;
    justify-content: center;

 }
    .container-content{
        text-align: center;
        font-weight: 900;
        /*font-size: 26px;*/
    }

    .container-del-btn{
        position: absolute;
        top:14px;
        right: -3px;
        width:50px;
        /*height:50px;*/
    }
 .container-content-add-btn{
     position: absolute;
     width:45px;
     left:26px;
     /*height:45px;*/
 }
 .container-content-sub-btn{
     position: absolute;
     width:42px;
     right:23px;
     /*height:42px;*/
 }
</style>
